<template>
  <div>
    <input 
      class="ipt" 
      type="text"
      placeholder="请输入你的任务，按回车确定" 
      @keyup.enter="handleKeyup"
    >
  </div>
</template>

<script>
import {nanoid} from 'nanoid'

export default {
  name: 'HeaderH',
  props:['date'],
  methods: {
    handleKeyup(e){
      const todoObj = {id:nanoid(),title:e.target.value,done:false}
      if(e.target.value !== '') {
        this.date(todoObj)
        e.target.value = ''
      } else {
        alert('未输入代办事项')
      }
    }
  },
}
</script>

<style scoped>
.ipt {
  display: block;
  width:600px;
  height: 30px;
  margin: 20px auto;
  outline: #ccc;
  border: 1px solid #ccc;
  text-indent: 10px;
}
.ipt:focus {
  border: 1px solid rgb(79, 255, 234);
}
</style>